<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
<body>

<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">去中心化分析</div>
                <div class="layui-card-body">
                    <div id="charts" style="height: 600px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">去中心化</div>
                <div class="layui-card-body">
                    <div id="Text1" style="height: 300px;">
                        <p>在原始的 DPoS算法中，随着区块链的长期运行，会出现贫富差距过大的现象， 从而产生“马太效应”，导致富者越富，贫者越贫，由于节点的代币数量直接关系到选举的权利，因此整个区块链网络将慢慢趋于中心化。</p><br/>
                        <p> DPoSPT通过出块奖励再分配来减少贫富差距，从而增强网络的去中心化，为了分析 DPoS 去中心化改进情况，通过计算基尼系数(Gini index)来衡量每轮选举过后的网络去中心化情况。</p>

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">基尼系数</div>
                <div class="layui-card-body">
                    <div id="Text2" style="height: 300px;">
                        <img class="cover-image" th:src="@{/static/images/gini_index.png}" sizes="(max-width: 80px) 80px" alt="">
                        <p>𝑛 ——节点数量</p>
                        <p>𝑢 ——节点财富均值</p>
                        <p>𝑌 ——节点𝑖的代币数</p>
                        <p>基尼系数最大是 1，最小是 0，越接近 0 表明收入分配越均匀。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript" type="text/javascript" charset="UTF-8">
    layui.config({
        base: '/static/lib/' //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(["echarts","ecStat"],
        function() {
            var $ = layui.jquery,
                element = layui.element,
                echarts = layui.echarts,
                alg = [[${session.alg}]],

                option1 = {
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        data: [alg, 'DPOS']
                    },
                    xAxis: {
                        name: '运行轮数',
                        type: 'category',
                        //data: [[${rounds}]],
                        data: [1,2,3,4,5,6],
                        tooltip: {
                            valueFormatter: function (value) {
                                return '运行轮数：'+value;
                            }
                        },
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '平均基尼系数',
                        min: 0.00,
                        max: 0.30,
                        interval: 100
                    },
                    series: [{
                        name: alg,
                        data: [0.030160465751317027, 0.054528754891083664, 0.07137340144140573, 0.09732436564658699, 0.11628821763887105, 0.13519007748442252],
                        //data: [[${DposptData}]],
                        type: 'line',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value.toFixed(4);
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#66cc99'
                            }
                        },
                        barMaxWidth: '50'
                    },
                        {
                            name: 'DPOS',
                            //data: [[${DposData}]],
                            data: [0.051124923315720626, 0.09439498210547884, 0.13647824095820388, 0.17087133091853648, 0.20152053022076225, 0.22942422810088176],
                            type: 'line',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value.toFixed(4);
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#FFFF66'
                                }
                            },
                            barMaxWidth: '50'
                        }]
                };
            mychart1 = echarts.init(document.getElementById('charts'));
            mychart1.setOption(option1, true)

        }
    );
</script>
</body>
</html>
